<template>
  <div>
    <div class="carousel-content">
      <div class="banner-wrap" :style="divStyle[index]" v-for="(item, index) in imgArr" :key="item">
        <img :src="item" />
      </div>

      <div v-if="showButton" class="carousel-ctrl" v-show="buttonVisible">
        <button class="carousel-button" @click="toLeft"><</button>
        <button class="carousel-button" @click="toRight">></button>
      </div>
    </div>

    <div v-if="!showButton" class="slick-list">
      <div :class="index === selectedBanner ? 'slick-active': ''" @click="changeBanner(index)" v-for="(item, index) in imgArr" :key="item"></div>
    </div>
  </div>

</template>

<script>
  import {throttle} from '@/assets/utils/index.js'

  export default {
    name: 'Carousel',
    props:{
      // 是否自动播放
      autoplay: {
        type: Boolean,
        default: false
      },
      // 传入的bannerList，不少于7个banner地址
      imgs:{
        type: Array,
        default: []
      },
      // 是否显示左右切换按钮
      showButton: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        divStyle:[
          'z-index: 1; opacity: 0;   left: 0px; height: 25%;',
          'z-index: 2; opacity: 0.4; left: 0px; height: 50%;',
          'z-index: 3; opacity: 0.8; left: 70px; height: 75%;',
          'z-index: 4; opacity: 1;   left: 230px; height: 100%;',
          'z-index: 3; opacity: 0.8; left: 592.5px; height: 75%;',
          'z-index: 2; opacity: 0.4; left: 865px; height: 50%;',
          'z-index: 1; opacity: 0;   left: 1067.5px; height: 25%;'
        ],
        buttonVisible: true
      }
    },
    computed:{
      // banner图的url数组，只取7个
      imgArr(){
        return this.imgs.slice(0,7)
      },
      // 现在选中的banner图的index
      selectedBanner:{
        get(){
          return this.divStyle.findIndex(item => item.indexOf('100%') !== -1)
        },
        set(){}
      }
    },
    created() {
      this.autoplay ? setInterval(() => {this.toLeft()},4500): ''
    },
    methods:{
      // 点击右按钮
      toRight(){
          let temp = this.divStyle[0]
          this.divStyle.forEach((item, index, arr) => {
            if(index === arr.length - 1){
              this.$set(this.divStyle, index, temp)
              return false
            }
            this.$set(this.divStyle, index, arr[index + 1])
          })
        // 隐藏按钮 实现防抖
        this.hiddenButton()
      },
      // 点击左按钮
      toLeft(){
        let temp = this.divStyle[6]
        for(let i = this.divStyle.length - 1; i >= 0; i-- ){
          if(i === 0){ this.$set(this.divStyle, i, temp);
          break
          }
          this.$set(this.divStyle, i, this.divStyle[i - 1])
        }
        this.hiddenButton()
      },
      // 点击下标切换轮播图
      changeBanner(index){
        if(index -3 > 0){
          // 恢复初始值
          Object.assign(this.divStyle, this.$options.data().divStyle)
          for(let i = 0; i < index-3; i++){
            this.toLeft()
          }
        }else if(index -3 < 0){
          Object.assign(this.divStyle, this.$options.data().divStyle)
          for(let i = 0; i < 3 - index; i++){
            this.toRight()
          }
        }else{
          // 恢复初始值，Object.assign不会被vue检测到数据已更改，不会更新视图，使用$set给对象赋值使视图更新。
          Object.assign(this.divStyle, this.$options.data().divStyle)
          this.$set(this.divStyle, 0, 'z-index: 1; opacity: 0;   left: 0px; height: 25%;',)
        }
      },
      // 隐藏点击按钮
      hiddenButton(){
        this.buttonVisible = !this.buttonVisible
        setTimeout(() => {
          this.buttonVisible = !this.buttonVisible
        },800)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .carousel-content{
    display: flex;
    width: 1260px;
    height: 300px;
    position: relative;
    overflow: hidden;
    .banner-wrap {
      position: absolute;
      line-height: 320px;
      transition: all 0.8s ease-in-out;
    }
  }
  .carousel-ctrl{
    position: absolute;
    top: 50%;
    z-index: 6;
    left: 50%;
    display: flex;
    width: 750px;
    transform: translate(-50%);
    justify-content: space-between;
  }
  .slick-list{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    div{
      width: 16px;
      border-radius: 1px;
      height: 4px;
      background: #3d5afe;
      opacity: 0.3;
      margin-right: 5px;
    }
    div:hover{
      cursor: pointer;
    }
    .slick-active{
      width: 24px;
      opacity: 1;
    }
  }
  .carousel-button{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.65);
    border: 1px solid transparent;
    opacity: 0.7;
    &:hover{
      cursor: pointer;
      color: #40a9ff;
      border-color: #40a9ff;
    }
  }

  img{
    height: 100%;
  }
</style>

